<!--  -->
<template>
  <div class="addspu-warp">
    <el-form label-width="80px">
      <el-form-item label="SPU名称">{{ spuName }}</el-form-item>
      <el-form-item label="SKU名称" prop="skuName">
        <el-input v-model="skuInfo.skuName" placeholder="SKU名称" />
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input v-model="skuInfo.price" placeholder="价格(元)" />
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input v-model="skuInfo.weight" placeholder="重量(千克)" />
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input v-model="skuInfo.skuDesc" placeholder="规格描述" type="textarea" :rows="4" style="max-width:600px;" />
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form ref="form" :inline="true" label-width="80px">
          <el-form-item v-for="attr in attrValueList" :key="attr.id" :label="attr.attrName">
            <el-select v-model="attr.newAttrValue" placeholder="请选择">
              <el-option v-for="attrValue in attr.attrValueList" :key="attrValue.id" :label="attrValue.valueName" :value="`${attrValue.attrId},${attrValue.id}`" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form ref="form" :inline="true" label-width="80px">
          <el-form-item v-for="saleAttr in saleAttrValueList" :key="saleAttr.id" :label="saleAttr.saleAttrName">
            <el-select v-model="saleAttr.saleAttrValue" placeholder="请选择">
              <el-option v-for="sale in saleAttr.spuSaleAttrValueList" :key="sale.id" :label="sale.saleAttrValueName" :value="`${saleAttr.id},${sale.id}`" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          ref="multipleTable"
          border
          tooltip-effect="dark"
          style="width: 100%"
          :data="imageList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="图片">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.imgUrl" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" />
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="defaultImg(scope.row)">
                设为默认
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 整体页面操作 -->
      <el-form-item>
        <el-button type="primary" @click="addSku">提交</el-button>
        <el-button @click="saveSku(0)">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'Addsku',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      // sku数据
      skuInfo: {
        category3Id: null, // 三级分类id
        skuName: '', // sku名称
        spuId: null, // spu id
        tmId: null, // 品牌id
        price: null, // 价格
        skuDefaultImg: '', // 默认图片
        skuDesc: '', // sku描述
        weight: '', // 重量
        skuAttrValueList: [], // 平台属性值列表
        skuImageList: [], // sku图片列表
        skuSaleAttrValueList: [] // sku销售属性值列表
      },
      // spu名称
      spuName: '',
      // 图片列表
      imageList: [],
      // 平台属性值列表
      attrValueList: [],
      // 销售属性值列表
      saleAttrValueList: [],
      // 选中的图片
      selected: null,
      // 表单验证规则
      rules: {
        skuName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {
    newAttrValueList() {
      const arr = this.attrValueList.map(item => {
        if (item.newAttrValue) {
          const oldarr = item.newAttrValue.split(',')
          return { attrId: oldarr[0], valueId: oldarr[1] }
        }
      })
      return arr.filter(Boolean)
    },
    newSaleAttrValueList() {
      const arr = this.saleAttrValueList.map(item => {
        if (item.saleAttrValue) {
          const oldarr = item.saleAttrValue.split(',')
          return { saleAttrId: oldarr[0], saleAttrValueId: oldarr[1] }
        }
      })
      return arr.filter(Boolean)
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    handleSelectionChange(val) {
      this.selected = val
      this.skuInfo.skuImageList = val
    },
    // 发请求获取平台属性列表
    async getAttrLsit(data) {
      const result = await this.$API.attr.reqAttrInfoList(data)
      if (result.code === 200) {
        this.attrValueList = result.data
      } else {
        return Promise.reject('请求失败')
      }
    },
    // 发请求获取spu图片列表
    async getSpuImgList(spuid) {
      const result = await this.$API.spu.reqSpuImageList(spuid)
      if (result.code === 200) {
        this.imageList = result.data
      } else {
        return Promise.reject('请求失败')
      }
    },
    // 发请求获取spu销售属性列表
    async getSpuSaleAttrList(spuid) {
      const result = await this.$API.spu.reqSpuSaleAttrList(spuid)
      if (result.code === 200) {
        this.saleAttrValueList = result.data
      } else {
        return Promise.reject('请求失败')
      }
    },
    // 初始化数据整理
    initData(spu) {
      this.spuName = spu.spuName
      this.skuInfo.spuId = spu.id
      this.skuInfo.tmId = spu.tmId
      this.skuInfo.category3Id = spu.category3Id
    },
    // 点击返回时的回调函数 传值给父组件
    saveSku(index) {
      this.$emit('saveSku', index)
    },
    // 点击设为默认按钮给sku的默认图片赋值
    defaultImg(row) {
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 点击添加时整理数据发请求
    async addSku() {
      // 整理平台属性列表
      this.skuInfo.skuAttrValueList = this.newAttrValueList
      this.skuInfo.skuSaleAttrValueList = this.newSaleAttrValueList
      const result = await this.$API.spu.reqSaveSkuInfo(this.skuInfo)
      if (result.code === 200) {
        // 调用返回函数进行返回
        this.saveSku(1)
      }
    }
  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.addspu-warp{
  width: 100%;
  .el-input{
    max-width: 600px;
  }
}
</style>
